<!DOCTYPE html>
<html>

	<head lang="en">
		<meta charset="UTF-8">
		<title>列表</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
		<meta name="apple-touch-fullscreen" content="yes">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no">
		<meta http-equiv="x-rim-auto-match" content="none" />
		<meta name="HandheldFriendly" content="true" />
		<link rel="stylesheet" href="assets/css/amazeui.min.css">
		<link rel="stylesheet" href="assets/css/style.css">
		<link type="text/css" rel="stylesheet" href="assets/css/demo.css">
		
		<style>
			.am-datepicker tr.am-datepicker-header {
				font-size: 1.6rem;
				color: #fff;
				background: #69bae0;
			}
			
			.am-datepicker-select {
				color: #fff;
			}
			
			.hunt-left {
				position: absolute!important;
				top: 0!important;
			}
			.search_body::after{
				content:"这个地方暂时没有线路哦";
				font-size:2rem;
				font-family:"微软雅黑";
				position:absolute;
				top:22rem;
				left:5rem;
				color:#666;
				right: 5rem;
				text-align: center;
			}
		</style>
	</head>

	<body>
		<header data-am-widget="header" class="am-header am-header-default">
			<div class="am-header-left am-header-nav">
				<a href="javascript:;" id="toidx">
					<img src="assets/images/left.png">
				</a>
			</div>
			<h1 class="am-header-title" style="margin:0 12%">
          <input id="search_inpt" class="txt" type="search" name="" value="目的地" onfocus="var s=value;if(value==s)value='';this.onblur=function(){if(value=='')value=s}">
        </h1>
			<div class="am-header-right am-header-nav">
				<button id="search_btn">搜索</button>
			</div>
		</header>
		<div style="width: 100%; height:4rem;"></div>
		<!-- screening -->
		<!-- <div class="screening">
        <ul>
            <li class="Regional">目的地</li>
            <span>|</span>
            <li class="Brand">时间天数</li>
            <span>|</span>
            <li class="Sort">筛选</li>
        </ul>
    </div>
    <div class="grade-eject">
        <ul class="grade-w">
            <div class="hunt">
                <ul class="hunt-left">
                  <li><a href="#">港澳台</a></li>
                  <li><a href="#">出境游</a></li>
                  <li class="active"><a href="#">国内游</a></li>
                  <li><a href="#">邮轮</a></li>
                  <li><a href="#">自由行</a></li>
                </ul>
                <div class="hunt-right" style="padding-bottom: 1rem">
                  <h2>云南</h2>
                  <span>大理</span><span>昆明</span><span>西双版纳</span>
                  <span>丽江</span>
                  <h2>西北</h2>
                  <span>嘉峪关</span><span>敦煌</span><span>张掖</span>
                  <span>华山</span><span>开封</span><span>宁夏</span>
                  <span>银川</span>
                  <h2>云南</h2>
                  <span>大理</span><span>昆明</span><span>西双版纳</span>
                  <span>丽江</span>
                  <h2>西北</h2>
                  <span>嘉峪关</span><span>敦煌</span><span>张掖</span>
                  <span>华山</span><span>开封</span><span>宁夏</span>
                  <span>银川</span>
                  
                </div>
                <div class="clear"></div>
            </div>
        </ul>
    </div>
    <div class="Category-eject">
        <ul style="background: #fff;z-index:2;position: absolute; height:16rem">
            <li>
                <span style="float: left;">出发日期：</span>
                <form action="" class="am-form" data-am-validator>
                    <input style="width:8.5rem; height:2.4rem; float: left;" type="text" class="am-form-field" placeholder="" data-am-datepicker/>
                    <span style="float: left;">~</span>
                    <input style="width:8.5rem; height:2.4rem; float: left;" type="text" class="am-form-field" placeholder="" data-am-datepicker/>
                </form>
                <div class="clear"></div>
            </li>
            <li>
                <span style="float: left;">行程天数：</span>
                <div class="shuzi">
                    <button type="button" class="minus">-</button>
                    <input type="text" class="am-num-text" value="0" />
                    <button type="button" class="plus">+</button>
                </div>
                <button class="btn-qd">确定</button>
            </li>
        </ul>
    </div>
    <div class="Sort-eject Sort-height">
        <ul class="Sort-Sort" id="Sort-Sort" style="height: 20rem;">
            <li onclick="Sorts(this)">
                <img src="assets/images/x6.png" class="img1">
                价格最低开始排序
                <img src="assets/images/x11.png" class="img img1">
            </li>
            <li onclick="Sorts(this)">
                <img src="assets/images/x7.png" class="img1">
                价格最高开始排序
                <img src="assets/images/x10.png"class="img img1">
            </li>
            <li onclick="Sorts(this)">
                <img src="assets/images/x8.png" class="img1">
                最近的出发日期排序
                <img src="assets/images/x11.png"class="img img1">
            </li>
            <li onclick="Sorts(this)">
                <img src="assets/images/x8.png" class="img1">
                最远的出发日期排序
                <img src="assets/images/x10.png"class="img img1">
            </li>
            <li onclick="Sorts(this)">
                <img src="assets/images/x9.png" class="img1">
                最少的行程天数排序
                <img src="assets/images/x11.png"class="img img1">
            </li>
            <li onclick="Sorts(this)">
                <img src="assets/images/x9.png" class="img1">
                最多的行程天数排序
                <img src="assets/images/x10.png"class="img img1">
            </li>
        </ul>
    </div>
    <div style="width: 100%; height:3rem;"></div> -->
		<div class="ly-list">
			<ul class="ly">
				<!--<li>
					<a href="show.html">
						<img src="assets/images/image.png" alt="">
						<span>深圳市出发</span>
					</a>
					<div class="order-right">
						<h2>【纯玩】三亚蜈支洲岛南湾猴岛西岛南山四天双飞团</h2>
						<span>天数：4天</span><b>￥1899</b>
						<font>团期：04-18,04-19,04-20</font>
					</div>
				</li>
				<li>
					<a href="show.html">
						<img src="assets/images/image.png" alt="">
						<span>深圳市出发</span>
					</a>
					<div class="order-right">
						<h2>【纯玩】三亚蜈支洲岛南湾猴岛西岛南山四天双飞团</h2>
						<span>天数：4天</span><b>￥1899</b>
						<font>团期：04-18,04-19,04-20</font>
					</div>
				</li>
				<li>
					<a href="show.html">
						<img src="assets/images/image.png" alt="">
						<span>深圳市出发</span>
					</a>
					<div class="order-right">
						<h2>【纯玩】三亚蜈支洲岛南湾猴岛西岛南山四天双飞团</h2>
						<span>天数：4天</span><b>￥1899</b>
						<font>团期：04-18,04-19,04-20</font>
					</div>
				</li>
				<li>
					<a href="show.html">
						<img src="assets/images/image.png" alt="">
						<span>深圳市出发</span>
					</a>
					<div class="order-right">
						<h2>【纯玩】三亚蜈支洲岛南湾猴岛西岛南山四天双飞团</h2>
						<span>天数：4天</span><b>￥1899</b>
						<font>团期：04-18,04-19,04-20</font>
					</div>
				</li>
				<li>
					<a href="show.html">
						<img src="assets/images/image.png" alt="">
						<span>深圳市出发</span>
					</a>
					<div class="order-right">
						<h2>【纯玩】三亚蜈支洲岛南湾猴岛西岛南山四天双飞团</h2>
						<span>天数：4天</span><b>￥1899</b>
						<font>团期：04-18,04-19,04-20</font>
					</div>
				</li>-->
			</ul>
			<!-- <div class="wu">
            <img src="assets/images/img.png" alt="">
            <p>暂无记录</p>
        </div> -->
			<div id="loading">正在获取数据...</div>
			<div id="nomoreData">亲，已经加载完了！</div>
		</div>
		<div id="toast"></div>
		<script src="assets/js/jquery.min.js"></script>
		<script src="assets/js/allUse.js"></script>
		<script src="assets/js/amazeui.min.js"></script>
		<script src="assets/js/demo.js"></script>
		
		<script type="text/javascript">
			$("body").css("min-height",clientHeight+"px");
//			$("#Sort-Sort li").click(function() {
//				$("#Sort-Sort li").removeClass("chack");
//				$(this).addClass("chack");
//				$("#Sort-Sort li img").addClass("img1");
//				$(this).find("img").removeClass("img1")
//			})
//			$(document).ready(function() {
//				$("#gradet li a").click(function(k, v) {
//					console.log($(this).html());
//					$("#gradet li a").each(function() {
//						$(this).css({
//							"color": "#666",
//							"background": "#fff"
//						});
//					});
//					$(this).css({
//						"color": "#fff",
//						"background": "#69bae0"
//					});
//				});
//			});
//			$(".screening ul li").click(function() {
//				$(".screening ul li").removeClass("color");
//				$(this).addClass("color");
//			})
//			$(".hunt-left li ").click(function() {
//				$(".hunt-left li").removeClass("active");
//				$(this).addClass("active");
//			})
//			$(".hunt-right span ").click(function() {
//				$(".hunt-right span").removeClass("active");
//				$(this).addClass("active");
//			})
		</script>
		<!--7.2搜索页面-->
		<script type="text/javascript">
			var req,search_token,val,flag;
//			if(GetQueryString("from")=="idxsch" && GetQueryString("val")){
//				var val=GetQueryString("val");
//				var search_token="";
//				req='{"city":"","dest_id":0,"dest_level":0,"time_start":"","time_end":"","days":0,"sort_type":0,"main_type":0,"next_page_token":""}'
//				search(val,search_token,true,req)
//				$("#search_inpt").on("keypress",function(e){
//					 var keycode = e.keyCode;  
//	                var searchName = $(this).val();
//	                if(keycode=='13') {  
//	                    e.preventDefault();
//	                    $("#loading").show();
//						$("#nomoreData").hide();
//	                    //请求搜索接口  
//	                     var val=$.trim($(this).val());
//		                   var search_token="";
//		                   req='{"city":"","dest_id":0,"dest_level":0,"time_start":"","time_end":"","days":0,"sort_type":0,"main_type":0,"next_page_token":""}'
//						search(val,search_token,true,req);
//	                } 
//				});
//				
//				$("#search_btn").click(function(){
//					var val=$.trim($("#search_inpt").val());
//		            var search_token="";
//		         	req='{"city":"","dest_id":0,"dest_level":0,"time_start":"","time_end":"","days":0,"sort_type":0,"main_type":0,"next_page_token":""}'
//					search(val,search_token,true,req);
//				});
//			}else if(GetQueryString("from")=="class"){
//				$("#loading").hide();
//				$("#nomoreData").hide();
//				$("#search_inpt").on("keypress",function(e){
//					 var keycode = e.keyCode;  
//	                var searchName = $(this).val();
//	                if(keycode=='13') {  
//	                    e.preventDefault();    
//	                    Startsearch();
//	                } 
//				})
//				$("#search_btn").click(function(){
//					Startsearch();
//				})
//			};
			$("#toidx").click(function(){
				window.location.href = document.referrer
			})
			$("#loading").hide();
			$("#nomoreData").hide();
			$("#search_inpt").on("keypress",function(e){
				 var keycode = e.keyCode;  
                var searchName = $(this).val();
                if(keycode=='13') {  
                	$("#loading").show();
					$("#nomoreData").hide();
                    e.preventDefault();    
                    Startsearch();
                } 
			})
			$("#search_btn").click(function(){
				$("#loading").show();
				$("#nomoreData").hide();
				Startsearch();
			})
			function Startsearch(){
				val=$.trim($("#search_inpt").val());
	            search_token="";
	            flag=true
	            req='{"city":"","dest_id":0,"dest_level":0,"time_start":"","time_end":"","days":0,"sort_type":0,"main_type":0,"next_page_token":""}'
				search();
			};
			if(window.sessionStorage.getItem("realposition")){
				var position_city=window.sessionStorage.getItem("realposition");
			}else{
				var position_city="深圳"
			}
			function search(){
				console.log(search_token)
				if(val===""){
					return
				}else{//调搜索ajax
					if(search_token==="" && flag===true){//第一次点击 搜索
						$(".ly").html("");
					};
					var encode_req=encodeURIComponent(req);
					console.log(req)
					$.ajax({
						type:"post",
						url:url_enter+"/api/search_line_by_key",
						data:{
//							"city":''+position_city+'',
							"next_page_token":search_token,
							"keyword":''+val+'',
							"req":''+encode_req+''
						},
						success:function(data){
							console.log(data);
							console.log(data.data.next_page_token)
							search_token=data.data.next_page_token;
							console.log(search_token)
							if(data.result===1){
								if(data.data.line_list===null && flag===true){
									console.log("此处无线路");
									$("#loading").hide();
									showToast("这里暂时没有线路哦~");
									$("#loading").hide();
									$("#nomoreData").hide();
								}else{
									if(data.data.line_list===null){
										return;
									};
									if(!data.data.next_page_token){
										show_hide(true)
									}
//									$("body").removeClass("search_body")
									for(var i=0;i<data.data.line_list.length;i++){
										$(".ly").append('<li><a href="show.html?line_id='
											+data.data.line_list[i].line_id+'"><div class="left_div"><img src="'
											+data.data.line_list[i].image+'"><span>'
											+data.data.line_list[i].depart+'出发</span></div><div class="order-right"><h2>'
											+data.data.line_list[i].title+'</h2><span>天数：'
											+data.data.line_list[i].days+'天</span><b>￥'
											+data.data.line_list[i].price+'</b><font>团期:'
											+data.data.line_list[i].time_select+'</font></div></a></li>')
									};
									
								}
							}else{
								alert(data.message)
							}
						},
						error: function(xhr, status, thrown) {
							console.log(xhr);
						}
					});
//					function scroll(){
//						if(data.data.next_page_token){
//							$(window).scroll(function(){
//							var scrollHeight=$(document).height();
//							var scrollTop=$(this).scrollTop();
//							var windowHeight =$(this).height();
//							if(scrollTop + windowHeight===scrollHeight){
//								console.log("到底啦");
//								search_token=data.data.next_page_token;
//								flag=false;
//								search(val,search_token,flag,req);　
//						    　}
//						})			
//										
//						}else{
//							$("#loading").hide();
//							$("#nomoreData").show();
//						}
//						
//					
//					}
					
			};
			};
			$(window).scroll(function(){
					var scrollHeight=$(document).height();
					var scrollTop=$(this).scrollTop();
					var windowHeight =$(this).height();
					if(scrollTop + windowHeight === scrollHeight && scrollTop>0){
					if(search_token){//存在下一页
							show_hide(false);
							console.log(2222);
							flag=false;
							req='{"city":"","dest_id":0,"dest_level":0,"time_start":"","time_end":"","days":0,"sort_type":0,"main_type":0,"next_page_token":"'+search_token+'"}'
							search();　
					    　　
					}else{
						search_token="";
						show_hide(true);
						
					}};
					
				})
				function show_hide(flag){
					if(flag){
						$("#loading").hide();
						$("#nomoreData").show();
					}else{
						$("#loading").show();
						$("#nomoreData").hide();
					}
				}
		</script>
	</body>

</html>